<template>
  <!-- action 必填 上传的地址 后端给 -->
  <!-- show-file-list 是否显示上传文件成功后的列表 -->
  <!-- on-success 文件上传成功时的钩子 -->
  <!-- before-upload 文件上传成功前的钩子 限制用户上传文件的类型和大小 -->
  <el-upload
    class="avatar-uploader"
    action=""
    :show-file-list="false"
    :before-upload="beforeAvatarUpload"
    :http-request="onUpload"
  >
    <!-- img和i互斥显示 -->
    <img v-if="value" :src="value" class="avatar">
    <i v-else class="el-icon-plus avatar-uploader-icon" />
  </el-upload>
</template>>

<!-- 2.上传到腾讯云的桶里
    1.点击到桶的基本使用
    2.下载依赖npm i cos-js-sdk-v5 --save
    3.引入依赖import COS from 'cos-js-sdk-v5';
    4.在上传的element-ui组件使用http-request属性,只是一个方法,参数是上传的得数据,当用户上传时替换action
    5.在http-request方法中,创建COS实例,实例中对象放SecretKey,SecretId数据
    6.调用cos.putObject方法,里面参数是 {
        Bucket: 'hm-rz-94-1324721122', // 桶名
        Region: 'ap-guangzhou', // 桶的所属区域
        Key: e.file.name, // 文件名，可以用参数的.file.name
        StorageClass: 'STANDARD', // 固定使用不修改
        Body: e.file // 文件信息，在参数.file
      }，
    7.方法中还有一个回调函数，里面有两个参数（err，data） err是上传不成功，data是上传成功
 -->
<script>
import COS from 'cos-js-sdk-v5'
export default {
  props: {
    value: {
      type: String,
      default: ''
    }
  },
  methods: {
    onUpload(e) {
      const cos = new COS({
        SecretId: 'AKIDrb8QoCTflmfWFoANl6E8qdXO8zoTxFa1',
        SecretKey: 'fJ3iGfWHrQsGazFNRLC2qZGwkXGtlbHl'
      })
      // 简单上传 适用于小文件
      //   cos.putObject({
      //     Bucket: '94xu-1324720861', // 必须
      //     Region: 'ap-guangzhou', // 存储桶所在地域，必须字段
      //     Key: e.file.name, // 必须
      //     StorageClass: 'STANDARD',
      //     Body: e.file, // 上传文件对象
      //     onProgress: function(progressData) {
      //       console.log(JSON.stringify(progressData))
      //     }
      //   }, function(err, data) {
      //     if (err) {
      //       // 处理请求出错
      //       console.log(err)
      //     } else {
      //       // 处理请求成功
      //       console.log(data)
      //     }
      //   })

      // 分片上传
      cos.uploadFile({
        Bucket: '94xu-1324720861', /* 填入您自己的存储桶，必须字段 */
        Region: 'ap-guangzhou', /* 存储桶所在地域，例如ap-beijing，必须字段 */
        Key: e.file.name, /* 存储在桶里的对象键（例如1.jpg，a/b/test.txt），必须字段 */
        Body: e.file, /* 必须，上传文件对象，可以是input[type="file"]标签选择本地文件后得到的file对象 */
        SliceSize: 1024 * 1024 * 5, /* 触发分块上传的阈值，超过5MB使用分块上传，非必须 */
        onTaskReady: function(taskId) { /* 非必须 */
          console.log(taskId)
        },
        onProgress: function(progressData) { /* 非必须 */
          console.log(JSON.stringify(progressData))
        },
        onFileFinish: function(err, data, options) { /* 非必须 */
          console.log(options.Key + '上传' + (err ? '失败' : '完成'))
        },
        // 支持自定义headers 非必须
        Headers: {
          'x-cos-meta-test': 123
        }
      }, (err, data) => {
        console.log(err || data)
        this.$emit('input', 'https://' + data.Location)
      })
    },
    beforeAvatarUpload(file) {
      const isJPG = ['image/jpeg', 'image/png', 'image/gif', 'image/bmp'].includes(file.type)
      const isLt2M = file.size / 1024 / 1024 < 5

      if (!isJPG) {
        this.$message.error('上传头像图片只能是 JPG 格式!')
        return false
      }
      if (!isLt2M) {
        this.$message.error('上传头像图片大小不能超过 2MB!')
        return false
      }
      return isJPG && isLt2M
    //   return true
    }
  }
}
</script>

<style>
  .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
  }
  .avatar {
    width: 178px;
    height: 178px;
    display: block;
  }
</style>
